{% extends theme("base.html") %}
{% block meta %}
    {{ super }}
    <meta name="csrf-token" content="{{ csrf_token() }}">
{% endblock %}
{% block ext_css %}
    {{ super() }}
    <link href="{{ url_for('static',filename='js/kindeditor/themes/simple/simple.css') }}" rel="stylesheet"
          type="text/css">
{% endblock %}
{% block content %}
    <div class="input-group container">
        <form action="" method="post" name="article_form" id="article_form">
            {{ form.csrf_token }}
            <div class="row container">
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon">{{ form.title.label }}</span>
                        {{ form.title(size=50,class="form-control",id='title') }}
                        {% for error in form.errors.title %}
                            <span style="color: red;">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-lg-3 pull-right">
                    <div class="input-group ">
                        <span class="input-group-addon">{{ form.category_id.label }}</span>
                        {{ form.category_id(class="form-control",placeholder="--选择--",id='category') }}
                        {% for error in form.errors.category_id %}
                            <span style="color: red;">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <br/>

            <div class="row container">
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon">{{ form.tag.label }}</span>
                        {{ form.tag(size=50,class="form-control",id='tag') }}
                        {% for error in form.errors.tag %}
                            <span style="color: red;">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-lg-3 pull-right">
                    <div class="input-group">
                        <span class="input-group-addon">{{ form.is_open.label }}</span>
                        {{ form.is_open(class="form-control" ,id='open') }}
                        {% for error in form.errors.is_open %}
                            <span style="color: red;">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <hr/>
            <p>{{ form.body(rows = 20,class="container",id='mceEditor') }}</p>
            {% for error in form.errors.body %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
            <hr/>
            {{ form.id(type="hidden",id='id') }}
        </form>
        <div class="row-fluid">
            <div class="col-lg-4 ">
                <div class="pull-right">
                    <button type="image" onclick="sub()" class="btn btn-success">
                        <span class="glyphicon glyphicon-ok-sign"></span> 提交
                    </button>
                </div>
            </div>
            <div class="col-lg-6 pull-left">
                <a href="{{ url_for('article.show',aid=form.id.data) }}" class="btn btn-success">
                    <span class="glyphicon glyphicon-eye-open"></span> 查看
                </a>
            </div>
        </div>
    </div>
    <br/>
    <br/>
    <br/>
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/kindeditor/kindeditor-all.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/kindeditor/lang/zh-CN.js') }}"></script>
    <script type="text/javascript">
        //初始化editor
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('#mceEditor', {
                uploadJson: '{{ url_for('main.upload') }}',
                themeType: 'simple'
            });
        });
    </script>

    <script type="text/javascript">
        //ajax提交
        function sub() {
            editor.sync();
            var title = document.getElementById('title').value;
            var category = document.getElementById('category').value;
            var tag = document.getElementById('tag').value;
            var open = document.getElementById('open').value;
            var body = $('#mceEditor').val();
            var text = editor.text();
            var id = document.getElementById('id').value;
            var data = {
                "text": text, "title": title, "category": category,
                "tag": tag, "open": open, "body": body, "id": id
            };
            var csrftoken = $('meta[name=csrf-token]').attr('content')
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken)
                    }
                }
            })
            $.ajax({
                data: data,
                url: "{{ url_for('article.commit') }}",
                async: true,
                type: "POST",
                dataType: 'json',
                success: function (data) {
                    alert(data.msg);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }
    </script>
{% endblock %}